<template>
	<view class="productSort">
		<div class="index">
			<!-- <view class="header acea-row row-center-wrapper">
				<view @click="goGoodSearch()" class="search acea-row row-middle">
					<text class="iconfont icon-xiazai5"></text>
					<input type="text" placeholder="请输入商品" />
					
				</view>
			</view> -->
			<view class="header acea-row row-center-wrapper">
				<view class="search acea-row row-between-wrapper">
					<view class="leftSearch">
						<text class="iconfont icon-sousuo2"></text>
						<!-- <form @submit.prevent="submit"></form> -->
						<input type="text" placeholder="搜索商品" v-model="where.keyword" />
					</view>
					<view class="bnt" @click="submit">搜索</view>
				</view>
			</view>
		</div>
		<view class="aside">
			<view class="item acea-row row-center-wrapper" :class="categoryDivindex === navActive ? 'on' : ''"
				v-for="(item, categoryDivindex) in category" :key="categoryDivindex"
				@click="asideTap(categoryDivindex,item)">
				<text>{{ item.cateName }}</text>
			</view>
		</view>
		<view class="conter">
			<view v-if="productList.length" class="list rightGoodsList">
				<view @click="goGoodsCon(item)" class="item" v-for="(item, productListIndex) in productList"
					:key="productListIndex">

					<view class="pictrue">
						<image :src="item.image" />
					</view>
					<view class="text">
						<view class="name1 ">{{ item.storeName }}</view>
						<view class="money">
							<text class="num font-color-red">
								<text>￥</text>
								{{ item.price }}</text>
							<view class="vip-money">已售{{ item.ficti }}</view>
						</view>
						<!-- <view style="">
							已售：{{item.ficti}}
						</view> -->
					</view>
				</view>
			</view>
			<view v-else class="list rightGoodsList">
				<view class="">
					<image class="none" src="/static/img/none.png" />
					<view class="nodata">
						暂无数据
					</view>
				</view>
			</view>
			<!-- <view v-for="(item, eq) in category" :key="eq">
				<view class="listw" v-if="eq === navActive">
					<view class="title acea-row row-center-wrapper" ref="title">
						<view class="line"></view>
						<view class="name">{{ item.cateName }}</view>
						<view class="line"></view>
					</view>
					


				</view>
			</view> -->
		</view>
		<!-- <view style="height:100rpx;"></view> -->
	</view>
	</view>
</template>
<script>
	import {
		getProducts
	} from '@/api/store'
	import {
		getCategory
	} from "@/api/store";
	import {
		trim
	} from "@/utils";

	export default {
		name: "GoodsClass",
		components: {},
		props: {},
		data: function() {

			return {
				category: [],
				navActive: 0,
				search: "",
				lock: false,
				loading: false,
				loadend: false,
				productList: [],
				Switch: true,
				target: false,
				// 分页begin
				where: {
					page: 1,
					limit: 8,
					keyword: '',
					sid: '',
				},


				// 分页end

			};
		},
		watch: {
			"$yroute.query.id": function(n) {
				if (n) {
					this.activeCateId(n);
				}
			}
		},
		mounted: function() {
			this.loadCategoryData();

		},
		onReachBottom() {
			// this.recommendLoading = true
			!this.loading && this.getProductList()
		},
		methods: {


			submit() {
				const search = trim(this.where.keyword) || "";
				// if (!search) return;
				this.navActive = 999;

				this.$set(this, 'productList', [])
				this.where.page = 1
				this.where.sid = '';
				this.loadend = false
				this.loading = false


				this.getProductList();
			},
			goGoodsCon(item) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.id,
						isIntegral: this.isIntegral,
					},
				})
			},
			getProductList() {
				if (this.loading) {
					return
				}
				this.loading = true
				let q = this.where
				let getData = getProducts
				getData(q).then(res => {
					this.loading = false
					if (this.target) {
						this.productList = res.data
						this.target = false
					} else {
						this.productList.push.apply(this.productList, res.data)
					}

					console.log(this.productList, 777777777777)

					this.loadend = res.data.length < this.where.limit //判断所有数据是否加载完成；
					this.where.page = this.where.page + 1
				})
			},

			goGoodSearch() {
				this.$yrouter.push("/pages/shop/GoodSearch/index");
			},
			goGoodsList(child) {
				this.$yrouter.push({
					path: "/pages/shop/GoodsList/index",
					query: {
						id: child.id,
						title: child.cateName
					}
				});
			},
			activeCateId(n) {
				let index = 0;
				n = parseInt(n);
				if (!n) return;
				this.category.forEach((cate, i) => {
					if (cate.id === n) index = i;
				});
				if (index !== this.navActive) {
					this.asideTap(index);
				}
			},
			loadCategoryData() {
				getCategory().then(res => {
					this.category = res.data;

					console.log(this.category, 9988666)
					this.where.sid = this.category?.[0]?.id;
					this.getProductList()

				});
			},
			submitForm: function() {
				var val = trim(this.search);
				if (val) {
					this.$yrouter.push({
						path: "/pages/shop/GoodsList/index",
						query: {
							s: val
						}
					});
					setTimeout(() => (this.search = ""), 500);
				}
			},
			asideTap(index, item) {
				this.navActive = index;
				console.log(item.id, 6655)
				this.where.sid = item.id;

				this.$set(this, 'productList', [])
				this.where.page = 1
				this.loadend = false
				this.loading = false
				this.getProductList();
			}

		}
	}
</script>

<style>
	.rightGoodsList .none {
		width: 240rpx;
		height: 240rpx;
		display: block;
		margin: 100px auto 10px;
	}

	.rightGoodsList .nodata {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
	}
	.conter{
		padding-top: 110rpx !important;
	}

	.productSort {
		height: 100%;
	}

	.rightGoodsList .item {
		display: flex;
		/* align-items: center; */
		border-bottom: 1rpx solid #efefef;
		padding: 20rpx 0;

	}

	.rightGoodsList .item:first-child {
		padding-top: 0 !important;
	}

	.rightGoodsList .item .pictrue {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.rightGoodsList .item .pictrue image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.rightGoodsList .item .text {
		padding-top: 20rpx;
		flex: 1;
		margin-right: 10rpx;

	}

	.rightGoodsList .item .name1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 15rpx;
	}

	.rightGoodsList .item .money {

		display: flex;
		align-items: center;
	}

	.rightGoodsList .item .num {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
		margin-top: 5rpx;
		display: flex;
		align-items: flex-end;
	}

	.rightGoodsList .item .font-color-red {
		color: #ea3933;
	}

	.vip-money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #959595;
		margin-left: 20rpx;
		margin-bottom: 5rpx;
		/* text-decoration: line-through; */
	}

	.productSort .leftSearch {
		display: flex;
		flex: 1;

	}

	.productSort .leftSearch input {
		flex: 1;
		font-weight: 500;
		font-size: 28rpx;
		color: #333;
	}

	.bnt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #037e61;
	}
</style>